<template>
  <el-row>
    <!-- 模糊查询 -->
    <!-- 维修记录 -->
    <el-col :span="4">
      <el-input v-model="carId" size="mini" placeholder="车辆ID"></el-input>
    </el-col>
     <el-col :span="4">
      <el-input v-model="maintainShopId" size="mini" placeholder="维修厂ID"></el-input>
    </el-col>

    <el-col :span="8">
      <el-button type="primary" size="mini" @click="search()" icon="el-icon-search">搜索</el-button>
      <!-- <el-button
        type="primary"
        size="mini"
        @click="addFormVisible = true" icon="el-icon-circle-plus">添加</el-button> -->
      <el-button type="primary" size="mini" @click="flush()" icon="el-icon-search">刷新</el-button>
    </el-col>
    <!-- 功能列表 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="carId" label="车辆ID" width="180"></el-table-column>
      <el-table-column prop="name" label="维修厂"></el-table-column>
      <el-table-column prop="amount" label="金额" width="180"></el-table-column>
      <el-table-column prop="addtime" label="新增时间" width="180"></el-table-column>
      <el-table-column prop="remark" label="评论" width="180"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="toEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页功能 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 2, 3, 4, 5, 6, 100, 200, 300, 400]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <!--添加弹出框-->
    <el-dialog title="维修记录添加" :visible.sync="addFormVisible">
      <el-form :model="form">
        <el-form-item label="车辆ID" :label-width="formLabelWidth">
          <el-input v-model="form.carId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="维修厂" :label-width="formLabelWidth">
          <el-input v-model="form.maintainShopId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="金额" :label-width="formLabelWidth">
          <el-input v-model="form.amount" autocomplete="off"></el-input>
        </el-form-item>
       <el-form-item label="新增时间" :label-width="formLabelWidth">
           <el-input v-model="form.addtime" autocomplete="off" type="date"></el-input>
        </el-form-item>
        <el-form-item label="评论" :label-width="formLabelWidth">
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click="add()">确定</el-button>
      </div>
    </el-dialog>
    <!--更新弹出框-->
    <el-dialog title="维修记录编辑" :visible.sync="updateFormVisible">
      <el-form :model="form">
        <el-form-item label="车辆ID" :label-width="formLabelWidth">
          <el-input v-model="form.carId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="维修厂" :label-width="formLabelWidth">
          <el-input v-model="form.maintainShopId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="金额" :label-width="formLabelWidth">
          <el-input v-model="form.amount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="评论" :label-width="formLabelWidth">
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateFormVisible = false">取消</el-button>
        <el-button type="primary" @click="update()">确定</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 5,
      total: 100,
      carId: "",
      maintainShopId:"",
      name:"",
      amount:"",
      remark:"",
      id: "",
      addFormVisible: false, //添加对话框是否显示
      updateFormVisible: false, //编辑对话框是否显示
      form: { status: "0" }, //添加或者更新form
      formLabelWidth: "120px",
      data: [],
    };
  },
  created: function() {
    this.load();
  },
  methods: {
    load() {
      var _this = this;
      //页面初始化时，加载的方法
      this.$http
        .get("http://localhost:9999/cars/maintainRecord/queryAll", {
          params: {
            pageNo: this.currentPage,
            pageSize: this.pageSize,
            carId: this.carId,
            maintainShopId: this.maintainShopId,
            name: this.name,
            amount: this.amount,
            addtime: this.addtime,
            remark: this.remark,
            id: this.id
          }
        })
        .then(response => {
          console.log(response.data);
          _this.tableData = response.data.data.list;
          _this.total = response.data.data.total;
        });
    },
    //每页显示数量发生变化
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.load();
    },
    //第几页发生变化
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.load();
    },
    //查询
    search() {
      this.load();
    },
    //跳转更新
    toEdit(index, row) {
      this.form = row;
      this.updateFormVisible = true;
    },
    //删除
    handleDelete: function(index, row) {
      var _this = this;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .delete(
              "http://localhost:9999/cars/maintainRecord/deleteMaintainRecord?id=" + row.id
            )
            .then(function(response) {
              console.log(response);
              if (response.status == 200) {
                if (response.data.data) {
                  //提示成功
                  _this.$message({
                    type: "success",
                    message: "删除成功!"
                  });
                  //重新加载数据
                  _this.load();
                }
              }
            })
            .catch(function(error) {
              console.log(error);
              _this.$message.error("你错了");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //添加
    add() {
      var _this = this;
      this.$http
        .post("http://localhost:9999/cars/maintainRecord/insertMaintainRecord", this.form)
        .then(function(response) {
          console.log(response);
          if (response.status == 200) {
            //提示成功
            _this.$message({
              message: "恭喜你，添加成功",
              type: "success"
            });
            //_this.$message.success("恭喜你，添加成功");
            //关闭弹出框
            _this.addFormVisible = false;
            //重新加载数据
            _this.load();
            //清空form
            _this.form = {};
          }
        })
        .catch(function(error) {
          console.log(error);
          _this.$message.error("你错了");
        });
    },
    //编辑
    update: function() {
      var _this = this;
      //JSON.stringify JSON 转 String
      // alert(JSON.stringify(this.form));
      this.$http
        .put("http://localhost:9999/cars/maintainRecord/updateMaintainRecord", this.form)
        .then(function(response) {
          console.log(response);
          if (response.status == 200) {
            //提示成功
            _this.$message({
              message: "恭喜你，操作成功",
              type: "success"
            });
            //关闭弹出框
            _this.updateFormVisible = false;
            //重新加载数据
            _this.load();
          }
        })
        .catch(function(error) {
          console.log(error);
          _this.$message.error("你错了");
        });
    },
    flush() {
      //刷新当前页
      location.reload();
    }
  }
};
</script>